<template>
<div class="main-reset">
    <!-- <so-header :seller="headerTitle"></so-header> -->
    <setHeader :title="headerTitle"></setHeader>

    <div class="content y-reset" style="margin-bottom: 0;">
        <mt-field tabindex="0" class="mint-user-cell" placeholder="请输入手机号码" type="tel" :attr="{ maxlength: 11 }" v-model="ruleForm2.mobile" @focus.native.capture="phoneFocus" @blur.native.capture="phoneBlur" ref="ruleForm1" ></mt-field>
        <mt-field  class="mint-user-cell" placeholder="请输入新密码(请输入新密码（英文数字结合，长度在6-16位）)" type="password" v-model="ruleForm2.password" @focus.native.capture="passFocus" @blur.native.capture="passBlur" ref="ruleForm2" ></mt-field>
        <mt-field class="mint-user-cell" label="" v-model="ruleForm2.captcha" placeholder="请输入验证码" @focus.native.capture="smsFocus" @blur.native.capture="smsBlur" ref="ruleForm3">
          <mt-button type="danger" class="y-code-btn" id="btn" v-on:click="sendSMS" :disabled="contpending">{{contpending ? '重新发送 (' + count + '秒)' : '获取验证码'}}</mt-button>
        </mt-field>
        <div class="y-text-top">
          <span class="text NoGetCode" style="float:right; color:#E50834; font-size: 14px;"><router-link to="">收不到验证码？</router-link></span>
        </div>

        <mt-button type="danger" size="large" class="el-long-button el-long-create-button el-long-user-button y-btn-red" v-on:click="handleSubmit2">确认</mt-button>
        <!--  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
        <h3 class="title">用户登录</h3>
        <el-form-item prop="account">
          <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
        </el-form-item>
      </el-form> -->
    </div>
  </div>

</template>

<script>
  import setHeader from '../public/setHeader.vue';
  import { Button } from 'mint-ui';
  import { MessageBox } from 'mint-ui';

  export default {
    data() {
      return {
      	headerTitle:'重置密码',
        logining: false,
        ruleForm2: {
          mobile: '',
          password: '',
          captcha:''
        },
        // rules2: {
        //   account: [
        //     { required: true, message: '请输入账号', trigger: 'blur' },
        //     //{ validator: validaePass }
        //   ],
        //   checkPass: [
        //     { required: true, message: '请输入密码', trigger: 'blur' },
        //     //{ validator: validaePass2 }
        //   ]
        // },
        checked: true,
        // resetShow: true,  //重置密码页面显示
        contpending: false,
        pending: false,
        count: 60,
        identCode: '',   //id btn变量
        identColor: '',   //id btn color的变量
      };
    },
    components: {
    	setHeader,
      Button
    },
    created(){
      let mobile = window.localStorage.getItem('mobile');
      if(mobile){
        this.ruleForm2.mobile = mobile;
      }
    },
    mounted() {
      this.$nextTick(() => {
        // 这里调用
        this.phoneFocus();
        this.smsFocus();
        this.passFocus();
        this.phoneBlur();
        this.passBlur();
        this.smsBlur();
      })
    },
    methods: {
      // 手机号聚焦
      phoneFocus() {
        var ruleForm1 =this.$refs["ruleForm1"].$el;
        ruleForm1.style.borderBottom = "1px solid #e50838";
      },
      phoneBlur() {
        var ruleForm1 =this.$refs["ruleForm1"].$el;
        ruleForm1.style.borderBottom = "1px solid #d8d8d8";
      },
      // 密码聚焦
      passFocus() {
        var ruleForm2 =this.$refs["ruleForm2"].$el;
        ruleForm2.style.borderBottom = "1px solid #e50838";
      },
      passBlur() {
        var ruleForm2 =this.$refs["ruleForm2"].$el;
        ruleForm2.style.borderBottom = "1px solid #d8d8d8";
      },
      // 验证码聚焦
      smsFocus() {
        var ruleForm3 =this.$refs["ruleForm3"].$el;
        ruleForm3.style.borderBottom = "1px solid #e50838";
      },
      smsBlur() {
        var ruleForm3 =this.$refs["ruleForm3"].$el;
        ruleForm3.style.borderBottom = "1px solid #d8d8d8";
      },
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      handleSubmit2() {
        var _this = this;

        if (_this.ruleForm2.mobile == "") {
          _this.$openTips({
            text: "手机号码不能为空",
            time:2000
          });
          return;
        }

        if (!/^1[3456789]\d{9}$/.test(_this.ruleForm2.mobile)) {
          _this.$openTips({
            text: "电话号码格式错误",
            time:2000
          });
          return;
        }

        if (_this.ruleForm2.mobile == "") {
          _this.$openTips({
            text: "密码不能为空",
            time:2000
          });
          return;
        }

        if (_this.ruleForm2.captcha == "") {
          _this.$openTips({
            text: "验证码不能为空",
            time:2000
          });
          return;
        }

          _this.$post(_this.$path + '/index.php/api/formal/Resetpas',_this.ruleForm2).then((response) => {
            console.log('666', response)
              if(response.code == 200){ 

                _this.$openDialog({
                  src: require('../common/images/UI-10.png'),
                  title: '欢迎您',
                  message: '修改密码成功',
                  okText: '完成',
                  callback (flag) {
                      if(flag) {
                        console.log('延迟', flag);
                        _this.$router.push({path:'/login'});
                      }     
                  }
                });
              }
              else{ 
                this.$openTips({
                  text: response.msg,
                  time: 2000
                });
              }
          })
        
      },
      sendSMS(){ 
        if (this.ruleForm2.mobile == "") {
          this.$openTips({
            text: "手机号码不能为空",
            time:2000
          });
          return;
        }

        if (!/^1[3456789]\d{9}$/.test(this.ruleForm2.mobile)) {
          this.$openTips({
            text: "电话号码格式错误",
            time:2000
          });
          return;
        }
        this.contpending = true;
        if (this.pending) return;
        this.pending = true;
        let timer = null,
            count = 60;
        clearInterval(timer);
        this.$nextTick(() => {
          timer = setInterval(_ => {
              if (count <= 0) {
                  this.contpending = false;
                  this.pending = false;
                  clearInterval(timer);
                  this.count = count = 60;
                  this.identCode = document.getElementById('btn').style.borderColor;
                  this.identCode="#e50838";
                  this.identColor = document.getElementById('btn').style.color;
                  this.identColor="#e50838";
              } else {
                  --count;
                  this.identCode="#999";
                  this.identColor="#999";
                  this.count = count;
              }
          }, 1000);
        })
        this.$fetch(this.$path+'/index.php/api/v2/SMS/'+ this.ruleForm2.mobile+'/password').then((res) => {
                
          })      
        },
      //  //设置cookie
      // setCookie: function (cname, cvalue, exdays) {
      //   var d = new Date();
      //   d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
      //   var expires = "expires=" + d.toUTCString();
      //   console.info(cname + "=" + cvalue + "; " + expires);
      //   document.cookie = cname + "=" + cvalue + "; " + expires;
      //   // console.info(document.cookie);
      // },
      // //获取cookie
      // getCookie: function (cname) {
      //   var name = cname + "=";
      //   var ca = document.cookie.split(';');
      //   // console.log("获取cookie,现在循环")
      //   for (var i = 0; i < ca.length; i++) {
      //     var c = ca[i];
      //     console.log(c)
      //     while (c.charAt(0) == ' ') c = c.substring(1);
      //     if (c.indexOf(name) != -1){
      //       return c.substring(name.length, c.length);
      //     }
      //   }
      //   return "";
      // },
      // //清除cookie
      // clearCookie: function () {
      //   this.setCookie("username", "", -1);
      // },
      // checkCookie: function () {
      //   var user = this.getCookie("username");
      //   if (user != "") {
      //     alert("Welcome again " + user);
      //   } else {
      //     user = prompt("Please enter your name:", "");
      //     if (user != "" && user != null) {
      //       this.setCookie("username", user, 365);
      //     }
      //   }
      // },
    }
  }

</script>
<style >

/* 头部导航颜色 */
.main-reset .header_array_text_white {
  background-color: #fff;
  color: #000;
}
.main-reset .header_array_text_white .title_white {
  color: #333;
}


.mint-user-cell{
	/* border-bottom: #d2d2d2 solid 1px !important; */
	height: 1rem !important;
}
.el-long-user-button{
	width:100% !important;
	
}
.el-long-create-button{
	margin-top:50px !important;
}
/* .is-right{
  opacity: 0;
} */
/* .mint-header{
  background-color: transparent !important;
}
.mint-header-title{
  overflow: visible ;
   color: #333333 ;
   font-size: 0.36rem ;
    font-family:SourceHanSansCN-Medium;
    font-weight:500;
    color:rgba(51,51,51,1);
    line-height: 0.36rem ;
}
a:-webkit-any-link{
  color:  #333333 ;
  font-size: 0.36rem ;
} */
.y-reset .mint-field-core{
  font-size: 0.28rem;
}
.main-reset .mint-field {
  padding: 0;
}

/*返回按钮*/
/* .mint-header .mint-button {
    background-color: transparent;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: inherit;
    display: inline-block;
    padding: 0;
    font-size: inherit;
    display: block;
  } */
  .mintui{
    font-size: 0.36rem;
  }

.y-text-top{
  margin-top: 0.2rem ;
  /* margin-bottom: 0.48rem ; */
}
.y-btn-red{
  margin-top: 0.9rem !important;
}
.main-reset .mint-cell-value{
   margin-right: 0; 
   padding: 0;
}

/* 找不到密码 */
.main-reset .y-text-top{
  margin-top: 0.2rem ;
  padding-bottom: 0.1rem;
}

.y-text-top .NoGetCode a{
  color: #c6c6c6 !important;
  font-size:  0.22rem !important;
}

</style>
